<script setup lang="ts">
import {reactive,onMounted} from 'vue'
import axios from 'axios'
import {getAccessToken} from "../../utils/auth";
import {useRouter} from "vue-router";

const $router = useRouter()

onMounted(() => {
  console.log('getAccessToken',getAccessToken())
  const accessToken =getAccessToken()
  if (accessToken ===  null || accessToken === undefined) {
    $router.push('/login')
  }
})

let images = reactive([{id: 1, imageUrl: 'https://images.dog.ceo/breeds/shiba/shiba-18.jpg'}])

async function addShowImage() {
  const response = await axios.get('https://dog.ceo/api/breeds/image/random')
  images.push({id: images.length + 1, imageUrl: response.data.message})
}
</script>

<template>
  <div>
    <div class="userInfo">
      <img src="https://images.dog.ceo/breeds/shiba/shiba-18.jpg" alt="">
    </div>
  </div>


  <div>
    <button @click="addShowImage">点击添加显示一张图片</button>
    <ul>
      <li v-for="img in images" :key="img.id">
        <img :src="img.imageUrl" width="200px">
      </li>
    </ul>
  </div>
</template>

<style scoped>
li {
  list-style: none;
  /* 移除默认列表符号 */
  padding: 30px;
  /* 为背景图留出空间 */
  display: inline;
  /* display: flex; */
  gap: 20px;
  padding: 10px;
  margin-right: 15px;
}

ul {
  width: 1000px;
  /* 父容器宽度的80% */
  max-width: 600px;
  /* 最大宽度限制 */
}

.userInfo {
  margin-left: 95%;
  margin-top: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>